<template>
  <div class="table_continer">
    <div>
      <!-- 列表 ------------------------------------------------------------------------------------------------------->
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" :selectable="selectEnable" />
        <el-table-column label="序号" width="100">
          <template slot-scope="scope">
            <div>{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="consumableBase.materialNum" label="物料编号" min-width="120" />
        <el-table-column prop="consumableBase.materialName" label="物料名称" />
        <el-table-column prop="consumableBase.typeName" label="类别" />
        <el-table-column prop="consumableBase.model" label="规格型号">
          <template slot-scope="{row}">
            {{ row.consumableBase && row.consumableBase.model || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="consumableBase.unitName" label="单位" />
        <el-table-column label="类型">
          <template slot-scope="{row}">
            <dict-tags :options="SparePartsAndConsumables" :value="row.consumableBase && row.consumableBase.kind" />
          </template>
        </el-table-column>
        <!-- <el-table-column label="所在仓库">
          <template slot-scope="{row}">
            {{ row.storehouseName || '-' }}
          </template>
        </el-table-column> -->
        <el-table-column prop="auditEndTime" label="库存预警值">
          <template slot-scope="{row}">
            <div> {{ row.consumableBase.lowerLimit || 0 }} ~ {{ row.consumableBase.highLimit || 0 }} </div>
          </template>
        </el-table-column>
        <el-table-column label="库存数量">
          <template slot-scope="{row}">
            {{ row.amount || '0' }}
          </template>
        </el-table-column>
        <el-table-column prop="auditEndTime" label="状态">
          <template slot-scope="{row}">
            <div v-if="row.consumableBase.lowerLimit > row.amount" style="color:#F56C6C">
              低于下限
            </div>
            <div v-if="row.consumableBase.highLimit >= row.amount && row.consumableBase.lowerLimit <= row.amount"
              style="color:#67C23A">
              正常
            </div>
            <div v-if="row.consumableBase.highLimit < row.amount" style="color:#E6A23C">
              高于上限
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建部门" align="center" min-width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.deptName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="center" min-width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.createBy || '-' }}
          </template>
        </el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="280">
          <template slot-scope="{row}">
            <el-button type="primary" icon="el-icon-view" size="small" @click="handleEdit(row)">审核流程</el-button>
            <el-button type="warning" icon="el-icon-refresh" plain v-show="row.auditStatus == 2" size="small"
              @click="handleAlter(row.purchaseId)">重新申请</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- ------------------------------------------------------------------------------------------------------------>
    </div>
    <!-- --------------------------------分页器---------------------------------------------------------- -->
    <div class="table_continer_pagination">
      <el-pagination :current-page="pageParams.pageNum" background :page-sizes="[10, 20, 50, 100]"
        :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
/** 拉取列表远程方法 ---------------------------------------------------------------------------------------------------------- */
import { list } from '@/api/deviceConsumable/inventorywarning'
/** ------------------------------------------------------------------------------------------------------------------------- */
import { pageCount } from '@/utils/pagination'
/** 查询参数处理 ---------------------------------------------------------------------------------------------------------- */
function processQueryParams (queryParams, pageParams) {
  const params = Object.assign({}, queryParams, pageParams)
  return params
}
/** ------------------------------------------------------------------------------------------------------------------------- */

export default {
  name: 'PaginationTable',
  data () {
    return {
      pagination: {
        total: 1,
        pageCount: 1
      },
      pageParams: {
        pageNum: 1,
        pageSize: 10,
        /** 列表默认排序字段 ---------------------------------------------------------------------------------------------------------- */
        orderByColumn: 'consumableBaseId',
        flagView: 2,
        'params[limit]': '1',
        /** ------------------------------------------------------------------------------------------------------------------------- */
        isAsc: 'desc'
      },
      queryParams: null,
      tableData: [],
      multipleSelection: []
    }
  },
  mounted () {
    this.refreshList()
  },
  methods: {
    refreshList () {
      const params = processQueryParams(this.queryParams, this.pageParams)
      console.log('查询参数', params);
      // --------consolelog('查询参数', params)
      list(params).then((res) => {
        console.log('获取列表', res);
        // --------consolelog('获取列表', res)
        this.pagination.total = res.total
        this.pagination.pageCount = pageCount(this.pagination.total, this.pageParams.pageSize)
        this.tableData = res.data
      })
    },
    handleQuery (queryParams) {
      this.queryParams = queryParams
      this.refreshList()
    },
    handleSizeChange (value) {
      this.pageParams.pageSize = value
      this.refreshList()
    },
    handleCurrentChange (value) {
      this.pageParams.pageNum = value
      this.refreshList()
    },
    handleSelectionChange (value) {
      this.$emit('select_click_item', value)
    },
    // 表格禁用条件返回事件
    selectEnable (row, rowindex) {
      if (row.consumableBase.lowerLimit > row.amount) {
        return true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.table_continer {
  border-radius: 5px;

  &_pagination {
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
  }
}
</style>
